@import url(../css/common.less);
body {
    min-width: 320px;
    width: 15rem;
    background-color: #fff;
    font-family: Helvetica Neue,Tahoma,Arial,
    PingFangSC-Regular,Hiragino Sans GB,Microsoft Yahei,sans-serif;
    text-align: center;
    color: #3c3c3c;
    line-height: 1.15;
}
@baseFont: 50;
.search-concent {
    position: fixed;
    top: 0;
    left: 0;
    width: 15rem;
    height: (141rem / @baseFont);
    background: #f2f2f2;
    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 20%);
    z-index: 999;
}
.concent {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 15rem;
    height: (84rem / @baseFont);
}
.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: (100rem / @baseFont);
    height: (36rem / @baseFont);
    background: url(../img/mi-logo.png) no-repeat;
    background-size: 50%;
    background-position: 50%;
    margin: 0 (25rem / @baseFont);
}
.search {
    display: flex;
    border-radius: 5px;
    flex: 1;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    text-align: left;
    line-height: (62rem / @baseFont);
    font-size: (30rem / @baseFont);
    color: #e5e5e5;
  }
.search-img {
    width: (60rem / @baseFont);
    height: (60rem / @baseFont);
    background: url(../img/search-img.png) no-repeat;
    background-size: 50%;
    background-position: 50%;
  }
.user {
    display: flex;
    width: (100rem / @baseFont);
    height: (60rem / @baseFont);
    background: url(../img/user.png) no-repeat;
    background-size: (60rem / @baseFont) (60rem / @baseFont);
    background-position: 50%;
    margin: 0 (20rem / @baseFont);
}
.nav {
    display: flex;
    width: 15rem;
    height: (56rem / @baseFont);
    // background-color: pink;
}
.nav a {
    font-size: (20rem / @baseFont);
    line-height: (56rem / @baseFont);;
    flex: 7;
    
}
.item {
    padding: 0 (25rem / @baseFont);
}
.item-icon {
    width: (68rem / @baseFont);
    height: (55rem / @baseFont);
}
.icon {
    display: block;
    width: (40rem / @baseFont);
    height: (40rem / @baseFont);
    background: url(../img/icon.png) no-repeat;
    background-size: (40rem / @baseFont) (40rem / @baseFont);
}
.footer {
    display: flex;
    position: fixed;
    bottom: 0;
    width: 15rem;
    height: (75rem / @baseFont);
    background-color: #fff;
}
.footer a {
    width: (146rem / @baseFont);
    height: (75rem / @baseFont);
    flex: 5;
}
.footer-icon i{
    display: block;
    width: (40rem / @baseFont);
    height: (40rem / @baseFont);
    margin: 0 (53rem / @baseFont) (10rem / @baseFont);
    background-size: (40rem / @baseFont);
    background-position: 50%;
}
.f1 {
    background: url(../img/f1.png) no-repeat;
}
.f2 {
    background: url(../img/f2.png) no-repeat;
}
.f3 {
    background: url(../img/f3.png) no-repeat;
}
.f4 {
    background: url(../img/f4.png) no-repeat;
}.f5 {
    background: url(../img/f5.png) no-repeat;
}
.footer-icon p {
    font-size: (22rem / @baseFont);
}

.main {
    position: absolute;
    top: (140rem / @baseFont);
    left: 0;
    right: 0;
    padding-bottom: 52px;
    // background-color: pink;
    margin:0 10px;
}
.main-img {
    display: flex;
    width: (720rem / @baseFont);
    height: (360rem / @baseFont);
}
.main-top {
    display: flex;
    width: (720rem / @baseFont);
    height: (152rem / @baseFont);
}
.main-top  a {
    flex: 5;
}
.main-top-img {
    display: block;
    width: (114rem / @baseFont);
    height: (152rem / @baseFont);
    font-size: 0;
}
.main-top-img img {
    width: (144rem / @baseFont);
    height: (152rem / @baseFont);

}
.line {
    display: flex;
    width: (720rem / @baseFont);
    border-bottom: (16rem / @baseFont) solid rgb(245, 245, 245);
    background-color: rgb(245, 245, 245);
}
.qiang {
    display: flex;
    width: (720rem / @baseFont);
    height: (180rem / @baseFont);

}
.qiang-img {
    width: (360rem / @baseFont);
    height: (168rem / @baseFont);
}
.qiang-img img {
    width: 100%;
    height: 100%;
}
.note {
    position: relative;
    display: flex;
    width: (720rem / @baseFont);
    height: (508rem / @baseFont);
    background-color: red;
}
.note-one {
    width: (358rem / @baseFont);
    height: (508rem / @baseFont);
}
.note-one img {
    width: (358rem / @baseFont);
    height: (508rem / @baseFont);
}
.note-two {
    width: (358rem / @baseFont);
    height: (252rem / @baseFont);
}
.note-two img {
    position: absolute;
    left: (360rem / @baseFont);
    width: (358rem / @baseFont);
    height: (252rem / @baseFont);
}
.note-three {
    width: (358rem / @baseFont);
    height: (252rem / @baseFont);
}
.note-three img {
    position: absolute;
    top: (256rem / @baseFont);
    left: (360rem / @baseFont);
    width: (358rem / @baseFont);
    height: (252rem / @baseFont);
}
.mi-ten{
    width: (720rem / @baseFont);
    height: (280rem / @baseFont);
}
.mi-ten img {
    width: (720rem / @baseFont);
    height: (280rem / @baseFont);
}
.day {
    width: (720rem / @baseFont);
    height: (440rem / @baseFont);
}
.day img{
    width: (720rem / @baseFont);
    height: (440rem / @baseFont);
}
.mi-type1 {
    display: flex;
    width: (720rem / @baseFont);
    height: (440rem / @baseFont);
    padding: 0 (12rem / @baseFont);
}
.type1-a1 {
    width: (342rem / @baseFont);
    margin-right: (12rem / @baseFont);
}
.img {
    width: (342rem / @baseFont);
    height: (280rem / @baseFont);
    background-color: rgba(245,245,245);
}
.img img{
    width: (342rem / @baseFont);
    height: (280rem / @baseFont);
}
.img-title {
    box-sizing: border-box;
    width: (342rem / @baseFont);
    height: (209rem / @baseFont);
    padding: (20rem / @baseFont) (27rem / @baseFont);
}
.name {
    font-size: .28rem;
    color: rgba(0,0,0,.87);
}
.brief {
    margin-top: .06rem;
    font-size: .22rem;
    line-height: .3rem;
    color: rgba(0,0,0,.54);
}
.price {
    font-size: .28rem;
    color: #ea625b;
    margin-top: .06rem;
}
.price s {
    color:rgba(0,0,0,.54);;
}
.buybtn {
    width: (288rem / @baseFont);
    height: (59rem / @baseFont);
    background: #ea625b;
    border-radius: .05rem;
    text-align: center;
    color: #fff;
    font-size: (24rem / @baseFont);
    line-height: (59rem / @baseFont);
    padding: .16rem 0;
    font-weight: 700;
}
.more {
    display: flex;
    width: (720rem / @baseFont);
    height: (100rem / @baseFont);
    background: #fff;
    height: 1rem;
    align-items: center;
    justify-content: center;
    line-height: 1rem;
    font-size: .28rem;
    text-align: center;
}
.xing{
    width: (720rem / @baseFont);
    height: (280rem / @baseFont);
}
.xing img{
    width: (720rem / @baseFont);
    height: (280rem / @baseFont);
}
.type2 {
    width: (720rem / @baseFont);
    height: (360rem / @baseFont);
}
.type2 a {
    display: flex;
    width: (720rem / @baseFont);
    height: (360rem / @baseFont);
}
.type2-img {
    width: (360rem / @baseFont);
    height: (360rem / @baseFont);
}
.info {
    box-sizing: border-box;
    text-align: left;
    width: (360rem / @baseFont);
    height: (360rem / @baseFont);
    padding: .64rem .12rem 0 .32rem;
}
.down {
    display: flex;
    width: (720rem / @baseFont);
    height: (480rem / @baseFont);
}
.down a {
    
    width: (358rem / @baseFont);
    height: (480rem / @baseFont);
}
.down a img{
    width: (358rem / @baseFont);
    height: (480rem / @baseFont);
}
.dow {
    margin-left: (5rem / @baseFont);
}
.line1 {
    width: (720rem / @baseFont);
    height: (4rem / @baseFont);
}